<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String basePath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>斗地主</title>
<script type="text/javascript"
	src="<%=basePath%>/resources/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var basePath ="<%=basePath%>";
</script>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
</style>
<script type="text/javascript">
	function cl() {
		alert("w");
	}
	var room_id_prefix = "room_id_";
	$(function() {
		rooms_init();
	})
	function rooms_init() {
		var url = basePath + "/enterGameLobby.do";
		$.ajax({
			type : "POST",
			url : url,
			// 			data : area,
			async : false,
			success : function(res) {
				var data = JSON.parse(res);
				foreachTable(data.length);
				fillingRoom(data);
			}
		});
	}
	function fillingRoom(data) {
		for (var i = 0; i < data.length; i++) {
			var room = $("#room").clone(true);
			room.attr("id", "room_" + i);
			var t = room.children("div").children("div").children("img");
			var p_size = data[i].playerList.length;
			for (var j = 0; j < p_size; j++) {
				t[j + 1].style.display = "block";
			}
			$("#" + room_id_prefix + i).append(room);
		}
	}
	//生成房间所占表格
	function foreachTable(size) {
		var td_size = 10;
		var tr_size = Math.ceil(size / td_size);
		var room_id_i = 0;
		for (var i = 0; i < tr_size; i++) {
			var tr = "<tr>"
			for (var j = 0; j < td_size; j++) {
				tr += "<td id=\"" + room_id_prefix + (room_id_i++)
						+ "\" style=\" width: 160px; height: 100px;\"></td>";
			}
			tr += "</tr>"
			$("#rooms").append(tr);
		}
	}
	function quick_start() {
		var url = basePath + "/quickGame.do";
		var room_id = -1;
		$.ajax({
			type : "POST",
			url : url,
			// 			data : area,
			async : false,
			success : function(res) {
				var data = JSON.parse(res);
				room_id = data.id;
			}
		});
		if (room_id != -1) {
			window.open("./room.jsp");
		}
	}
	window.setInterval(rooms_init, 1000);
</script>
</head>
<body style="background-color: #F2F2F2;">
	<!-- 	<button onclick="cl()">aassssss</button> -->
	<div style="height: 60px; background-color: #BD8865;">
		<div style="position: absolute; left: 150px; top: 15px;">
			<div style="position: absolute;">
				<img alt="快速开始"
					src="<%=basePath%>/resources/img/card/quick_start.jpg"
					style="width: 100px; height: 30px;">
			</div>
			<div
				style="position: absolute; margin: 0 auto; font-size: 15px; top: 5px; left: 15px; width: 100px;">
				<font color="white">快速开始 》</font>
			</div>
			<div
				style="position: absolute; width: 100px; height: 30px; cursor: pointer;"
				onclick="quick_start()"></div>
		</div>
	</div>
	<div>
		<div id="hall"
			style="position: relative; height: 1000px; width: 1650px; margin: 0 auto;">
			<table>
				<tbody id="rooms">
				</tbody>
			</table>
		</div>
	</div>
	<!-- 	</div> -->
	<div style="display: none;">
		<div style="position: relative;" id="room">
			<div
				style="position: absolute; width: 160px; height: 100px; left: 0px; top: 0px;">
				<div style="position: absolute; left: 30px; top: 15px;">
					<img src="<%=basePath%>/resources/img/card/desk.jpg"
						style="width: 100px; height: 60px;">
				</div>
				<div style="position: absolute; left: 2px; top: 25px;">
					<img src="<%=basePath%>/resources/img/card/player.jpg"
						style="width: 25px; height: 25px; display: none;" name="player">
				</div>
				<div style="position: absolute; right: 2px; top: 25px;">
					<img src="<%=basePath%>/resources/img/card/player.jpg"
						style="width: 25px; height: 25px; display: none;" name="player">
				</div>
				<div style="position: absolute; left: 65px; top: 75px;">
					<img src="<%=basePath%>/resources/img/card/player.jpg"
						style="width: 25px; height: 25px; display: none;" name="player">
				</div>
			</div>
			<div
				style="position: absolute; width: 160px; height: 100px; left: 0px; top: 0px;">
			</div>
		</div>
	</div>
</body>
</html>